@babel/template

What is @babel/template?

The @babel/template package is a part of the Babel toolchain that allows developers to create AST (Abstract Syntax Tree) nodes with placeholders programmatically. This is useful for code generation, transformation, and manipulation tasks where you want to produce syntactically correct code snippets based on a template with variable parts.

What are @babel/template's main functionalities?

Building AST Nodes

This feature allows you to build AST nodes using template literals with placeholders. The placeholders are then replaced with actual values to create a syntactically correct code snippet.

const template = require('@babel/template').default;
const buildRequire = template(`
  const %%importName%% = require(%%source%%);
`);
const ast = buildRequire({
  importName: template.identifier('myModule'),
  source: template.stringLiteral('my-module')
});

Using Placeholders

This feature demonstrates how to use placeholders for different parts of the code, such as function names, parameters, and bodies. The placeholders are replaced with AST nodes representing identifiers, arrays of identifiers, and block statements, respectively.

const template = require('@babel/template').default;
const buildFunction = template(`
  function %%funcName%%(%%params%%) {
    return %%body%%;
  }
`);
const ast = buildFunction({
  funcName: template.identifier('myFunction'),
  params: [template.identifier('a'), template.identifier('b')],
  body: template.blockStatement([])
});

Customizing Placeholder Patterns

This feature shows how to customize the placeholder pattern used in the template. This is useful when you want to define a specific pattern for your placeholders to avoid conflicts with other parts of the code.

const template = require('@babel/template').default;
const buildAssertion = template(`
  assert(%%test%%, '%%errorMessage%%');
`, {
  placeholderPattern: /^%%[a-zA-Z0-9_]+%%$/
});
const ast = buildAssertion({
  test: template.binaryExpression('===', template.identifier('a'), template.numericLiteral(3)),
  errorMessage: template.stringLiteral('a is not 3')
});

Other packages similar to @babel/template

recast

Recast is a JavaScript AST manipulation library that allows you to parse, transform, and print code. It provides a different API than @babel/template but serves a similar purpose in terms of manipulating AST nodes. Recast preserves the original formatting of the code, which is a feature that distinguishes it from @babel/template.

escodegen

Escodegen is a code generator for ECMAScript. It takes an AST and turns it into code. While it doesn't provide templating functionality like @babel/template, it is often used in conjunction with AST manipulation libraries to generate code after transformations have been applied.

jscodeshift

Jscodeshift is a toolkit for running codemods over multiple JavaScript or TypeScript files. It uses recast under the hood for parsing and printing, while providing a higher-level API for transforming code. It's more focused on large-scale codebase refactors compared to the more granular transformations that @babel/template is typically used for.

README

@babel/template

Generate an AST from a string template.

See our website @babel/template for more information or the issues associated with this package.

Install

Using npm:

npm install --save-dev @babel/template

or using yarn:

yarn add @babel/template --dev

Changelog

v7.25.9 (2024-10-22)

:bug: Bug Fix

• babel-parser, babel-template, babel-types
  • #16905 fix: Keep type annotations in syntacticPlaceholders mode (@liuxingbaoyu)
• babel-helper-compilation-targets, babel-preset-env
  • #16907 fix: support BROWSERSLIST{,_CONFIG} env (@JLHwung)
• Other
  • #16884 Analyze ClassAccessorProperty to prevent the no-undef rule (@victorenator)

:house: Internal

• babel-helper-transform-fixture-test-runner
  • #16914 remove test options flaky (@JLHwung)

:running_woman: Performance

• babel-parser, babel-types
  • #16918 perf: Make VISITOR_KEYS etc. faster to access (@liuxingbaoyu)